<template>
  <div class="top-nav">
    <div class="img-container">
      <a href="/">
        <img src="../../../assets/imgs/signin/top_logo.png" alt="京东logo">
      </a>

      <!-- 垂直排列的链接组 -->
      <div class="vertical-group">
        <a href="./user">我的京东</a>
        <a href="/">返回京东首页</a>
      </div>

      <!-- 标签项 -->
      <div class="tab-items">
        <div class="item" v-for="item in tabItems" :key="item.text">
          {{ item.text }}
          <i v-if="item.icon" :class="item.icon"></i>
        </div>
      </div>

      <!-- 搜索框和购物车 -->
      <div class="right-actions">
        <div class="search-box">
          <input type="text" placeholder="搜索...">
          <button class="search-btn">搜索</button>
        </div>
        <div class="cart-container">
          <div class="cart-icon">
            <i class="iconfont icon-gouwuche"></i>
            <span class="cart-count">{{ authStore.isLoggedIn ? cartStore.totalCount : 0 }}</span>
          </div>
          <span class="cart-text">购物车</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
// 在这里写 Composition API 代码
import { useAuthStore } from '@/stores/auth';
import { useCartStore } from '@/stores/cart';
const cartStore = useCartStore();
const authStore = useAuthStore();
const tabItems = [
  { text: '首页', icon: 'iconfont' },
  { text: '账户设置', icon: 'iconfont icon-xiala' },
  { text: '评价', icon: 'iconfont icon-xiala' }
]
</script>

<style scoped lang="scss">
// 在这里写 SCSS 样式
.top-nav {
  width: 100%;
  height: 101px;
  display: flex;
  justify-content: center;
  align-items: center;

  .img-container {
    height: auto;
    width: 100%;
    background-color: #df3232;
    display: flex;
    align-items: center;
    padding: 10px 20px;

    a {
      color: white;
      text-decoration: none;

      img {
        margin-right: 20px;
        width: 158px;
        height: 80px;
      }
    }

    // 垂直排列的链接组
    .vertical-group {
      display: flex;
      flex-direction: column;
      margin-right: 30px;
      gap: 8px;

      a {
        color: white;
        text-decoration: none;

        &:hover {
          text-decoration: underline;
        }
      }
    }

    .tab-items {
      display: flex;
      gap: 20px;
      margin-right: 30px;
      align-items: center;

      .item {
        color: white;
        display: flex;
        align-items: center;
        gap: 5px;
        cursor: pointer;
        font-size: 14px;
      }
    }

    // 右侧操作区：搜索框和购物车
    .right-actions {
      display: flex;
      align-items: center;
      gap: 20px;
      margin-left: auto; // 推到最右侧

      .search-box {
        display: flex;
        align-items: center;

        input {
          padding: 6px 10px;
          border: none;
          border-radius: 4px 0 0 4px;
          outline: none;
          width: 200px;
          height: 32px;
          font-size: 14px;
        }

        .search-btn {
          background-color: #c81623;
          color: white;
          border: none;
          padding: 0 12px;
          height: 32px;
          border-radius: 0 4px 4px 0;
          cursor: pointer;

          &:hover {
            background-color: #a6131f;
          }
        }
      }

      .cart-container {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 5px;
        width: 100px;
        background-color: white;
        cursor: pointer;
        font-size: 14px;
        position: relative;

        .cart-icon {
          position: relative;
          font-size: 20px;

          .cart-count {
            position: absolute;
            top: -8px;
            right: -8px;
            background-color: #ff0000;
            color: white;
            font-size: 12px;
            width: 16px;
            height: 16px;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            font-weight: bold;
            z-index: 1;
            /* 确保数量标记在最上层 */
          }
        }

        // 购物车文字 - 使用红色与白色背景对比
        .cart-text {
          white-space: nowrap;
          color: #df3232;
          /* 文字使用红色，与背景对比 */
        }
      }
    }
  }
}
</style>
